<{if $setting.pic}>  
<div id="slideMain-<{$widgets_id}>">
<div style="height:<{$setting.height}>px;overflow:hidden;width:<{$setting.width}>px;">
	<ul class="slideWrap" style="overflow:overflow;height:<{$setting.height}>px;">
	<{foreach from=$setting.pic item=data key=key}>
	  <li class="slideitem" style="<{if $setting.direction=='Left'}> float:left <{/if}>">
		<a href="<{$data.linktarget}>"><img width="<{$setting.width}>" height="<{$setting.height}>" img-lazyload="<{$data.link}>" /></a> 
	  </li>
	<{/foreach}>
	</ul> 
</div> 
<ul id="num_nav" class="num_nav clearfix">
	<{foreach from=$setting.pic item=data key=key name="item"}>
	<li>
		<a class="triggers" href="javascript:void(0)">
			<{$smarty.foreach.item.iteration }>
		</a>
	</li>
  	<{/foreach}> 
</ul>
</div > 

	<style>
	<{assign var=num_nav_width value=$setting.width/count($setting.pic)}>
	#slideMain-<{$widgets_id}> .num_nav  li{float:left; height:12px; width:<{$num_nav_width}>px; font-size:10px; line-height:12px; text-align:center;cursor:pointer;}
	#slideMain-<{$widgets_id}> .num_nav  li a{ display:block; background:#<{$setting.oriBackground}>; color:#<{$setting.orifontcolor}>; text-align:center;}
	#slideMain-<{$widgets_id}> .num_nav  li a.active{ background:#<{$setting.curBackground}>; color:#<{$setting.curfontcolor}>;}
	</style>
	
	<script>
	window.addEvent('domready', function(){ 
 
		new Switchable('slideMain-<{$widgets_id}>',{
			effect:'<{$setting.direction}>',
			eventType:'<{$setting.mousetype}>',
			triggers:'.triggers',
			lazyDataType:'img',
			panels:'.slideitem',
			interval:'<{$setting.stayTime}>',
			content:'.slideWrap'
		  });
	});
	</script>	
	
<{/if}>